import {View, Button, Text, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './toolsBox.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import 'taro-ui/dist/style/components/icon.scss';
import community_service_lanjing from '@/assets/image/index/tabBarImage/community_service_lanjing.png';
import gift_collection_lanjing from '@/assets/image/index/tabBarImage/gift_collection_lanjing.png';
import living_payment_lanjing from '@/assets/image/index/tabBarImage/living_payment_lanjing.png';
import sendPoints from '@/assets/image/index/tabBarImage/sjf.png';

import community_service_chijing from '@/assets/image/index/tabBarImage/community_service_chijing.png';
import gift_collection_chijing from '@/assets/image/index/tabBarImage/gift_collection_chijing.png';
import living_payment_chijing from '@/assets/image/index/tabBarImage/living_payment_chijing.png';

import community_service_shuangchong from '@/assets/image/index/tabBarImage/community_service_shuangchong.png';
import gift_collection_shuangchong from '@/assets/image/index/tabBarImage/gift_collection_shuangchong.png';
import living_payment_shuangchong from '@/assets/image/index/tabBarImage/living_payment_shuangchong.png';
import {ant} from 'wmkit';
type IToolsBoxProps = T.IProps & T.IToolsBoxProps;
//@ts-ignore
@connect<Partial<IToolsBoxProps>, T.IToolsBoxState>(store2Props, actions)
export default class Info extends Component<Partial<IToolsBoxProps>, T.IToolsBoxState> {
  constructor(props: IToolsBoxProps) {
    super(props);
    this.state = {};
  }

  renderToolsBox() {
    let {
      actions: {action},
      main: {memberCardType, memberInfo},
    } = this.props;
    let community_service = community_service_lanjing;
    let living_payment = living_payment_lanjing;
    let gift_collection = gift_collection_lanjing;
    if (memberCardType === 'chijing') {
      community_service = community_service_chijing;
      gift_collection = gift_collection_chijing;
      living_payment = living_payment_chijing;
    }
    if (memberCardType === 'shuangchong') {
      community_service = community_service_shuangchong;
      gift_collection = gift_collection_shuangchong;
      living_payment = living_payment_shuangchong;
    }
    // const customerId = Taro.getStorageSync('b2b-wechat@login')?.customerId;

    let tabList = [
      {
        title: '社区服务',
        img: {
          src: community_service,
          width: '78rpx',
          height: '78rpx',
        },
        url: '/pages/package-D/communityService/index',
        plugins: '',
        sendPoints: true,
        // /pages/package-A/memberOpen/index
      },
      {
        title: '生活娱乐',
        img: {
          src: living_payment,
          width: '84rpx',
          height: '74rpx',
        },
        url: '',
        async click() {
          const customerId = memberInfo.customerId;
          if (customerId) {
            // Taro.navigateTo({
            // url: `/pages/package-D/mayi-share/index?customerId=${customerId}`
            // `plugin://mayi-movie/index?movieuid=${customerId}&movieapikey=${ant.getAntApiKey()}&index=/pages/index/index`,
            // })
            Taro.navigateTo({
              url: `plugin://mayi-movie/index?movieuid=${customerId}&movieapikey=${await ant.getAntApiKey()}&index=/pages/index/index`,
            });
          }
        },
        sendPoints: true,
        // /pages/package-A/taskCenter/index
      },
      {
        title: '礼包领取',
        img: {
          src: gift_collection,
          width: '72rpx',
          height: '74rpx',
        },
        url: '/pages/package-B/receiving-gifts/index',
        plugins: '',
        sendPoints: false,
      },
      // {
      //   title: '房产管家',
      //   img: houseIcon,
      //   url: '/pages/package-A/house/index',
      // },
      // {
      //   title: '物业维修',
      //   img: repairIcon,
      //   url: '/pages/package-A/repair/index',
      // },
      // {
      //   title: '邻里帮送',
      //   img: complainIcon,
      //   url: '/pages/package-D/pickupExpressDelivery/index',
      // },
      // {
      //   title: '投诉建议',
      //   img: complainIcon,
      //   url: '/pages/package-A/complaints/index',
      // },
      // {
      //   title: '免费兑好物',
      //   img: pointscheck,
      //   url: '/pages/package-C/points-mall/index',
      // },
    ];
    return tabList.map((item, i) => {
      return (
        <View
          key={i}
          className="tabs"
          style={{position: 'relative'}}
          onClick={() => {
            let itemStr = Taro.getStorageSync('b2b-wechat@login');
            if (item.click) {
              if (!itemStr) {
                Taro.navigateTo({
                  url: '/pages/package-C/login/login/index',
                });
                return;
              }
              item.click();
              // Taro.navigateTo({ url: item.plugins });
              return;
            }
            if (!item.url) {
              Taro.showToast({
                title: '升级中，敬请期待~',
                icon: 'none',
              });
              return;
            }
            if (!itemStr) {
              Taro.navigateTo({
                url: '/pages/package-C/login/login/index',
              });
              return;
            }
            if (Taro.getStorageSync('blacklistModel')) {
              action.commonChange('main.blacklistModel', true);
              return;
            }
            Taro.navigateTo({
              url: item.url,
            });
          }}
        >
          <Image
            className="img"
            src={item.img.src}
            style={{width: item.img.width, height: item.img.height, position: 'relative'}}
            mode="widthFix"
          />
          {item.sendPoints && (
            <Image
              className="img"
              src={sendPoints}
              style={{width: '78rpx', height: '30rpx', position: 'absolute', top: -5, right: -10}}
              mode="widthFix"
            />
          )}
          <Text className="title">{item.title}</Text>
        </View>
      );
    });
  }

  render() {
    let {
      main,
      actions: {action},
    } = this.props;
    return <View className="PageIndexToolsBox">{this.renderToolsBox()}</View>;
  }
}

//create by moon https://github.com/creasy2010/moon
